<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>盈亏检测</title>
    <link rel="stylesheet" href="../../layui-v2.6.8/layui/css/layui.css">
    <script type="text/javascript" src="../../layui-v2.6.8/layui/layui.js"></script>
    <script type="text/javascript" src="../../js/jQuery%20v3.6.0.js"></script>
    <script type="text/javascript" src="../../js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    setTimeout(function () {

        option = {
            title: {
                text: '月盈亏监测'
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['month','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                    ['收入','3000', '3500', '4000', '3200', '5000', '8000','4000','6000','5000','4500','5000','5400'],
                    ['支出','2000', '2500', '2600', '2300', '2400', '3500', '2600', '2500', '2400', '2400', '2500', '2500']
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {focus: 'data'},
                    label: {
                        formatter: '{b}: {@一月} ({d}%)'
                    },
                    encode: {
                        itemName: 'month',
                        value: '一月',
                        tooltip: '一月'
                    }
                }
            ]
        };

        myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                var dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.setOption(option);

    });

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
</script>
</body>
</html>